<!-- body onload="document.registration.userid.focus();"-->
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="user" uri="/WEB-INF/tags/ErrorTag.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



<t:basicTemplate pageTitle="SWIMv2 - Registration">
	<jsp:attribute name="extrahead">
		
		<link rel='stylesheet' href='css/plainform.css' type='text/css' />
		
		<link rel='stylesheet' href='css/registrationStyle.css'
			type='text/css' />
		
		<!--  ajax trick to check the username existence  (old style, arghh, no jquery in it :( ) -->
		<script src="script/registrationAjax.js"></script>
		
		
		<!-- jqeury library, include in order to run the rest -->
	    <script type="text/javascript" src="script/jq.js"></script>
	   
	   <!--  states that when #custom_form is submitted, it has to be validated --> 
	   <script type="text/javascript" src="script/triggerValidation.js"></script>
	    
	    <!--  validate the form  -->
	    <script type="text/javascript" src="script/validate.js"></script> 
	    
	</jsp:attribute>

	<jsp:body>
        <h1>Registration Form</h1>

		<div class="error-style">
				<user:errors error="${param.error}"></user:errors>
		</div>

		<c:if test="${(not empty param.status) && (param.status=='taken')}">
			<p>
				The username <c:out value="${param.username}" /> already exist!
				 try again putting a 42 somewhere ;) 
			</p>	
		</c:if>
	
		<c:if test="${(not empty param.status) && (param.status=='tooshort')}">
			<p>
				Not all form fields where filled! You talkin' to me? You talkin' to me? 
			</p>
		</c:if>
	
		<c:if
			test="${(not empty param.status) && (param.status=='notequalpass')}">
			<p>
				Can't you write the same password twice? try again and stop watching those little pretty kitty videos! ;)
			</p>
		</c:if>
		
		
		<c:if test="${(not empty param.status) && (param.status=='isrobot')}">
			<p>
				Are you for real? Or are you doing the robot? Or ARE YOU a robot? :o
			</p>
		</c:if>
	
		<p>Use tab keys to move from one input field to the next.</p>
	

		
		<div id="hartman">
			<img src="img/Hartman.jpg" alt="hartman" id="hartman" />
		</div>
	
	
	
		
		<div id="form">
			<!--  onSubmit="return formValidation();" -->
			<form name='registration' method="post"
				action="./proceedRegistration" id="custom_form">
				<ul>
	
					<li><label for="username">Username*:</label><span id="res"class="${sessionScope.color}"></span></li>
					<li><input type="text" name="username" size="50"
						value="${param.username}" id="username" onkeyup="checkAvailable()"
						onchange="checkAvailable()"
						data-validation="validate_length length1-10" /></li>
	
					<li><label for="passid">Password*:</label></li>
					<li><input type="password" name="passid" size="12"
						data-validation="validate_length length4-15"
						value="${param.password}" /></li>
	
					<li><label for="passid_confirm"> Confirm Password*: </label></li>
					<li><input type="password" name="passid_confirm" size="12"
						value="${param.password}" /></li>
	
	
					<li><label for="name">Name:</label></li>
					<li><input type="text" name="name" size="50"
						value="${param.name}" /></li>
	
					<li><label for="surname">Surname:</label></li>
					<li><input type="text" name="surname" size="50"
						value="${param.surname}" /></li>
	
					<li><label for="bday">Birthday:</label></li>
					<li><input type="date" name="bday" /></li>

					<li><label for="email">Email*:</label></li>
					<li><input type="text" name="email" size="50"
						value="${param.email}"
						data-validation="validate_email" /></li>
				
					<li><label id="gender">Sex:</label></li>
					<li><input type="radio" name="sex" value="Male"
						<c:if test="${(not empty param.sex) and (param.sex=='Male')}">
				  		checked	</c:if> />
						<span>Male</span></li>
						
					<li><input type="radio" name="sex" value="Female"
						<c:if test="${(not empty param.sex) and (param.sex=='Female	')}">
				  		checked	</c:if> />
						<span>Female</span></li>
						
					<li><label for="captcha">Show us you're not a robot: write ${captcha} in letters *:</label></li>
					<li><input type="text" name="captchaResult" size="50" /></li>
					<li><input type="hidden" name="captcha" value="${captcha}"
						size="50" /></li>			
	
					<li><input type="submit" name="submit" value="Submit" /></li>
				</ul>
			</form>
    	
		</div>
	</jsp:body>
</t:basicTemplate>

